<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由嵌套</title>
	</head>
	<body>
		<div id="app">
			<h1>动物园</h1>
			<router-link to="/tiger">老斧</router-link>
			<router-link to="/lion">大猫咪</router-link>
			<router-view></router-view>
		</div>
		<template id="tigerTem">
			<div>
				<h1>我是一只大老斧</h1>
				<img src="../images/1.jpeg" />
			</div>
		</template>
		<template id="lionTem">
			<div>
				<h1>我是一只毛溜子</h1>
				<img src="../images/2.jpg" />
				<h3>
					<!-- 实现路由的嵌套机制 -->
					<router-link to="/lion/one">原配</router-link>
					<router-link to="/lion/two">小妾</router-link>
					<!-- 子级应该在该区域展现数据 -->
					<router-view></router-view>
				</h3>
			</div>
		</template>

		<template id="oneTem">
			<div>
				<h1>原配老大</h1>
				<img src="../images/3.jpg" />
			</div>
		</template>
		<template id="twoTem">
			<div>
				<h1>小妾小三</h1>
				<img src="../images/4.jpg" />
			</div>
		</template>
		<!-- 1.引入JS路由需要依赖vue 注意顺序 -->
		<script src="../js/vue.js"></script>
		<script src="../js/vue-router.js"></script>

		<script>
			let tigerCom = {
				template: "#tigerTem"
			}

			let lionCom = {
				template: "#lionTem"
			}

			let oneCom = {
				template: "#oneTem"
			}

			let twoCom = {
				template: "#twoTem"
			}


			/* 
				1.如果需要在App根标签中跳转,则写到routes根目录下
				2.如果需要进行父子嵌套,则应该使用children属性
				3.如果使用children属性,则在自身的router-view展现数据
			 */
			let router = new VueRouter({
				routes: [{
						path: "/tiger",
						component: tigerCom
					},
					{
						path: "/lion",
						component: lionCom,
						children: [{
								path: "/lion/one",
								component: oneCom
							},
							{
								path: "/lion/two",
								component: twoCom
							},
						],
					}
				]
			})
			const app = new Vue({
				el: "#app",
				router
			})
		</script>
	</body>
</html>
